<template>
  <div id="app">
    <div class="main">
      <Navbar/>
      <router-view/>
      <Footer/>
    </div>
    <div class="tips">
      <div class="camp">
        <h1 class="title">Gourmet! <small>グルメ！<span class="ch">美食家！</span></small></h1>
      </div>
      <p class="tip">请切换至电脑并全屏浏览！</p>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
import Footer from '@/components/Footer.vue'
import ddl from '@/assets/common/ddl.png'

export default {
  name: 'App',
  components: {
    Navbar,
    Footer
  },
  mounted() {
    // 控制台输出DDL
    let logger = console.log // eslint-disable-line
    let fontFamily = '"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif'
    let fontStyle = `font-size: 22px; margin-left: 0.8em; color: #f77513; text-shadow: 0 0 10px #ccc; font-family: ${fontFamily};`
    let url = `${window.location.origin}${ddl}`
    let style = `padding:64px 128px;line-height:128px;background:url(${url}) no-repeat;`
    logger('%c', style)
    logger('%c用技术和创意改变世界！', fontStyle)
    logger('%c关注DDLTECH，掌握人工智能等前沿科技！', fontStyle)
    logger('%c如有更多兴趣，请发送邮件到dinghaoran@tiaozhan.com（注明“来自 console”）', 'color: red; font-size: 16px')
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  text-decoration: none;
  color: #2c3e50;
}

.tips {
  background-color: #1a1832;

  .tip {
    color: #d5d6e6;
    font-size: 26px;
    text-align: center;
    padding-bottom: 30px;
  }

  .camp {
    color: #1acfff;
    padding-top: 40px;
    padding-bottom: 40px;

    .title {
      font-size: 56px;
      text-align: center;
      text-shadow: 4px 4px 4px #1a7cf5;

      small {
        font-size: 32px;
        text-shadow: 2px 2px 2px #1a7cf5;

        .ch {
          color: #d5d6e6;
          text-shadow: 2px 2px 2px #b2b3b4;
        }
      }
    }
  }
}
@media screen and (min-width: 940px) {
  .tips {
    display: none;
  }
}
@media screen and (max-width: 940px) {
  .main {
    display: none;
  }
}
</style>
